<template>
	<div class="content">
		<Title></Title>
		<div class="wrapper" v-if="data">
			<div class="order-number">
				<p v-text="`订单编号: ${data.orderNumber}`"></p>
				<p v-text="`订单状态: ${data.status?'已付款':'等待付款'}`"></p>
			</div>
			<div class="order-view-block">
				<ol>
					<li v-for="(item,i) in orderBlock" :key="i" :class="!data.status&&i ===0 || data.status&&i ===1?'done':''">
						<span class="status" v-text="item"></span>
						<span class="time" v-if="!data.status&&i ===0 || data.status&&i ===1" v-text="data.addTime"></span>
					</li>
				</ol>
			</div>
			<div class="order-view-product order-view-block">
				<ol class="productBox" v-if="isInit">
					<li v-for="(item,i) in product">
						<img :src="item[0]" alt="">
						<div class="infor">
							<div class="product-name" v-text="item[1]"></div>
							<div class="product-price">
								<span v-text="`售价: ${item[3]} x ${item[2]}`"></span>
								<span v-text="`${item[3]*item[2]}元`"></span>
							</div>
						</div>
					</li>
				</ol>
			</div>
			<div class="order-view-block order-view-text">
				<p class="time" v-text="`下单日期:  ${data.addTime}`"></p>
				<p class="address" v-text="`收货地址: ${userDetail.site || site.site}`"></p>
				<p class="consignee" v-text="`收货人名:  ${userDetail.consignee || site.consignee} ${userDetail.phone || site.phone}`"></p>
				<p v-text="`收货时间: 不限送货时间`"></p>
				<p v-text="`发票类型: 电子发票`"></p>
				<p v-text="`发票抬头: 个人`"></p>
			</div>
		</div>
		<!--价格数量结算-->
		<template v-if="data">
			<div class="bottom-submit" v-if="data.status === null">
				<div class="box-flex">
					<div class="price-box flex">
						<span v-text="`应付总额:`"></span>
						<br>
						<strong v-text="price"></strong>
						<span v-text="`元`"></span>
					</div>
					<a v-text="`取消订单`" class="flex disable" @click="del(data.orderId)"></a>
					<a class="btn flex" v-text="`立刻支付`" @click="payment(data.orderId)"></a>
				</div>
			</div>
			<div class="bottom-submit" v-if="data.status !== null">
				<div class="box-flex">
					<div class="price-box flex">
						<span v-text="`已付款:`"></span>
						<br>
						<strong v-text="price"></strong>
						<span v-text="`元`"></span>
					</div>
					<a v-text="`申请退款`" class="flex disable" @click="del(data.orderId)"></a>
					<router-link to="/" class="btn flex" v-text="`返回首页`"></router-link>
				</div>
			</div>
		</template>
	</div>
</template>

<script type="text/ecmascript-6">
    import Title from "../components/Title";
    import {createNamespacedHelpers} from "vuex";
    const {mapState,mapGetters} = createNamespacedHelpers("orderDetail");//mapState放在计算属性//const声明常量
    export default {
        inject:["reload"],
        components:{
            Title
        },
	    data(){
          return {
              orderBlock:["下单","付款","配货","出库","交易成功"],
              userDetail:{
                  site:this.$store.state.order.site,
                  consignee:this.$store.state.order.consignee,
                  phone:this.$store.state.order.phone,
	          }
          }
	    },
	    computed:{
		    ...mapState(["data","isInit","site"]),
		    ...mapGetters(["product"]),
		    price(){
		        let sum = null;
			    for(let i=0;i<this.product.length;i++){
                   let num = parseInt(this.product[i][2]);
                   let price = parseInt(this.product[i][3]);
                   sum += num * price;
			    }
			    return sum;
		    }
	    },
	    methods:{
            //申请退款
            del(id){
                console.log(id);
                this.$store.dispatch("order/del",id);
                this.$router.push({path:"/"})
            },
            //付款
            payment(id){
                this.$store.dispatch("order/payment",id);
                this.$router.push({path:"/"})
            },
	    },
	    updated(){

	    }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
	.wrapper
		padding-top .9rem
		background: #f5f5f5
		.order-number
			background white
			padding: .26rem .36rem
			margin-bottom: .2rem
			p
				color: #3c3c3c
				padding .03rem 0
				font-size .25rem
		.order-view-block
			border-bottom: 1px solid #DEDEDE
			margin-bottom: 0
			padding: .26rem .36rem
			background: #fff
			ol
				display flex
				justify-content space-between
				li
					flex-grow 1
					flex-basis 0
					margin-right: .02rem
					.status
						background: #ccc;
						color: #fff;
						text-align: center;
						padding: .1rem 0;
						margin-bottom: .28rem;
						display: block;
				.done>.status
					background: #0c6
				.time
					font-size .20rem
					display: block;
					color #000
					text-align center
		.order-view-product
			margin-bottom: 0.2rem
			.productBox
				flex-direction column
				li
					padding .2rem 0
					display flex
					align-items stretch
					img
						margin-right: .2rem;
						width: 1rem;
						height: 1rem;
					.infor
						flex-grow 1
						display flex
						flex-direction column
						justify-content center
						div
							padding .02rem 0
							color #333
						.product-price
							display flex
							justify-content space-between
		.order-view-text
			p
				color #333
				letter-spacing 0.02rem

	.bottom-submit
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		z-index: 99;
		box-shadow: 0 3px 14px 2px rgba(0,0,0,.12);
		.box-flex
			display: flex
			.flex
				-webkit-box-flex: 1;
				-webkit-flex: 1 1 auto;
				flex: 1 1 auto
			.price-box
				font-size: .26rem;
				color: #999;
				width: 100%;
				text-align: center;
				padding-top: .15rem
				strong
					font-size: .4rem
					color: #ff5722
					margin-right: .2em
			.disable
				color: #333
				background: #f4f4f4;
				border: 1px solid #f4f4f4
				text-align: center;
				width: 100%;
				height: 1rem;
				line-height: 1rem;
				font-size: .28rem
			.btn
				outline: 0;
				background: #ff6700;
				color: #fff;
				text-align: center;
				width: 100%;
				height: 1rem;
				line-height: 1rem;
				font-size: .28rem;
</style>